<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2024-01-18 09:54:17
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2025-10-28 09:33:14
 * @FilePath: \vue-admin-template\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="normal-container" v-if="totalConfig">
        <div style="display: flex;">
            <div style="background-color: #fff;padding: 20px;width: calc(50% - 20px);margin-right: 20px;">
                <div class="buttonMain" style="margin-left: -20px;">
                    <div @click="clickDay(index)" :class="checkIndex == index ? 'buttonBoxYes' : 'buttonBox'"
                        v-for="(item, index) in list" :key="index">
                        {{ item }}
                    </div>
                    <el-date-picker @change="changeTime" value-format="yyyy-MM-dd" v-if="list[checkIndex] == '自定义'"
                        :clearable="false" v-model="value1" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="title">
                    会员概况
                </div>
                <div style="display: flex;align-items: center;margin-top: 50px;">
                    <div style="width: 25%;" v-for="(item, index) in memList" :key="index">
                        <div :id="`echarts` + index" style="width:100%;height: 100px;"></div>
                        <div style="text-align: center;font-size: 12px;margin-top: 10px;">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;width: calc(50%);">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div class="title">
                        老会员管理
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <div
                        style="display: flex;align-items: center;justify-content: space-between;background-color: #FFF7F7;padding: 7px;font-size: 14px;margin-bottom: 10px;">
                        <div style="display: flex;align-items: center;">
                            <div>
                                <img style="width: 25px;height: auto;vertical-align: middle;margin-right:5px;"
                                    src="@/assets/icon/会员分析-高风险会员.png" alt="">
                            </div>
                            <div>高风险会员</div>
                        </div>
                        <div style="color: #F26666;">{{ oldMemberObject.highRiskMembers }}人</div>
                    </div>
                    <div
                        style="display: flex;align-items: center;justify-content: space-between;background-color: #F0FAFE;padding: 7px;font-size: 14px;margin-bottom: 10px;">
                        <div style="display: flex;align-items: center;">
                            <div>
                                <img style="width: 25px;height: auto;vertical-align: middle;margin-right:5px;"
                                    src="@/assets/icon/会员分析-新增沉睡会员.png" alt="">
                            </div>
                            <div>新增沉睡会员</div>
                        </div>
                        <div style="color: #38BAF1;">{{ oldMemberObject.addSleepyMembers }}人</div>
                    </div>
                    <div
                        style="display: flex;align-items: center;justify-content: space-between;background-color: #FFF7F7;padding: 7px;font-size: 14px;margin-bottom: 10px;">
                        <div style="display: flex;align-items: center;">
                            <div>
                                <img style="width: 25px;height: auto;vertical-align: middle;margin-right:5px;"
                                    src="@/assets/icon/会员分析-累积沉睡会员.png" alt="">
                            </div>
                            <div>累积沉睡会员</div>
                        </div>
                        <div style="color: #F26666;">{{ oldMemberObject.accumulateSleepyMembers }}人</div>
                    </div>
                    <div
                        style="display: flex;align-items: center;justify-content: space-between;background-color: #FFF7F7;padding: 7px;font-size: 14px;margin-bottom: 10px;">
                        <div style="display: flex;align-items: center;">
                            <div>
                                <img style="width: 25px;height: auto;vertical-align: middle;margin-right:5px;"
                                    src="@/assets/icon/会员分析-新增流失会员.png" alt="">
                            </div>
                            <div>新增流失会员</div>
                        </div>
                        <div style="color: #F26666;">{{ oldMemberObject.addLostMembers }}人</div>
                    </div>
                    <div
                        style="display: flex;align-items: center;justify-content: space-between;background-color: #F9FDF7;padding: 7px;font-size: 14px;">
                        <div style="display: flex;align-items: center;">
                            <div>
                                <img style="width: 25px;height: auto;vertical-align: middle;margin-right:5px;"
                                    src="@/assets/icon/会员分析-累积流失会员.png" alt="">
                            </div>
                            <div>累积流失会员</div>
                        </div>
                        <div style="color: #A4DD94;">{{ oldMemberObject.accumulatedMembershipLoss }}人</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: flex;margin-top: 20px;">
            <div style="background-color: #fff;padding: 20px;width: calc(50% - 20px);margin-right: 20px;">
                <div class="title">
                    活跃会员数
                </div>
                <div style="margin-top: 15px;">
                    <div id="echartsHuo" style="width:100%;height: 400px;"></div>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;width: calc(50%);">
                <div class="title">
                    消费人群分布
                </div>
                <div style="margin-top: 15px;">
                    <div id="echartsXiao" style="width:100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div style="display: flex;margin-top: 20px;">
            <div style="background-color: #fff;padding: 20px;width: calc(50% - 20px);margin-right: 20px;">
                <div class="title">
                    新会员发展
                </div>
                <div style="margin-top: 15px;">
                    <div id="echartsXin" style="width:100%;height: 400px;"></div>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;width: calc(50%);">
                <div class="title">
                    老会员复购
                </div>
                <div style="margin-top: 15px;">
                    <div id="echartsLao" style="width:100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div style="background-color: #fff;padding: 20px;">
                <div class="title">
                    确认慢病会员
                </div>
                <div style="margin-top: 15px;">
                    <el-table :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="totalConfig['确认慢病会员']" style="width: 100%"">
                        <el-table-column prop="value1" label="健康状况"></el-table-column>
                        <el-table-column prop="value2" label="总会员人数"></el-table-column>
                        <el-table-column prop="value3" label="本月新增数"></el-table-column>
                        <el-table-column prop="value4" label="本月活跃数"></el-table-column>
                        <el-table-column prop="value5" label="90天未交易会员数"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var echarts = require('echarts');

export default {
    data() {
        return {
            totalConfig: null,

            myChart5: null,
            option5: null,
            myChart4: null,
            option4: null,
            myChart3: null,
            option3: null,
            myChart2: null,
            option2: null,
            memList: [
                {
                    myChart: null,
                    option: null,
                    color: '#4FD5D7',
                    value: 12.36,
                    name: '会员销售额占比'
                },
                {
                    myChart: null,
                    option: null,
                    color: '#4CA5F7',
                    value: 12.36,
                    name: '会员毛利额占比'
                },
                {
                    myChart: null,
                    option: null,
                    color: '#F4C63D',
                    value: 12.36,
                    name: '会员来客占比'
                },
                {
                    myChart: null,
                    option: null,
                    color: '#34D58A',
                    value: 12.36,
                    name: '活跃会员占比'
                },
            ],
            myChart: null,
            option: null,
            currentChoose: '集团',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            checkIndex: 0,
            list: ['今天', '近7日', '近30日', '自定义'],
            iconList: [
                {
                    name: '在库品规数',
                    imgName: '动销管理1-在库品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'
                },
                {
                    name: '断货品规数',
                    imgName: '动销管理2-断货品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'
                },
                {
                    name: '动销品规数',
                    imgName: '动销管理3-动销品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '%'
                },
                {
                    name: '不动销品规数',
                    imgName: '动销管理4-不动销品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''
                },
                {
                    name: '90天不动销成本额',
                    imgName: '动销管理5-90天不动销成本额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '人'
                },
                {
                    name: '近40天动销率',
                    imgName: '动销管理6-近40天动销率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'
                },
                {
                    name: '近90天动销率',
                    imgName: '动销管理7-近90天动销率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''
                },
                {
                    name: '断货损失',
                    imgName: '动销管理8-断货损失',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''
                },
                {
                    name: '90天以上积压成本额',
                    imgName: '动销管理9-90天以上积压成本额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''
                },
                {
                    name: '库存周转天数',
                    imgName: '动销管理10-库存周转天数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''
                },
            ],
            value1: '',
            form: {
                isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                days: 1, //最近几天天数
                beginDate: "", //自定义开始时间
                endDate: "" //自定义结束时间
            },
            memberObject: {},
            oldMemberObject: {},
            activeObject: {},
            consumeObject: {},
            newMemberObject: {},
            oldRepurchaseObject: {},
        }
    },
    mounted() {
        this.totalConfig = window.PLATFROM_CONFIG.memberAnalysis;
        this.getToday()
        this.queryDict()
    },
    methods: {
        queryDict() {
            this.$baseRequest('/member/analysis/oldMemberManage', {}, {}, 'post').then(res => {

                this.oldMemberObject = res.data;
            });
            Promise.all([
                new Promise((resolve, reject) => {
                    this.$baseRequest('/member/analysis/activeMember', {}, {}, 'post').then(res => {
                        console.log(res);
                        this.activeObject = res.data;
                        resolve()
                    });
                }),
                new Promise((resolve, reject) => {
                    this.$baseRequest('/member/analysis/consumerDistribution', {}, {}, 'post').then(res => {
                        console.log(res);
                        this.consumeObject = res.data;
                        resolve()
                    });
                }),
                new Promise((resolve, reject) => {
                    this.$baseRequest('/member/analysis/newMemberDevelopment', {}, {}, 'post').then(res => {
                        console.log(res);
                        this.newMemberObject = res.data;
                        resolve()
                    });
                }),
                new Promise((resolve, reject) => {
                    this.$baseRequest('/member/analysis/oldMemberRepurchase', {}, {}, 'post').then(res => {
                        console.log(res);
                        this.oldRepurchaseObject = res.data;
                        resolve()
                    });
                }),
                new Promise((resolve, reject) => {
                    this.$baseRequest('/member/analysis/memberProfile', this.form, {}, 'post').then(res => {

                        this.memberObject = res.data;
                        this.anotherEcharts();

                        resolve()

                    });
                }),
            ]).then(result => {
                this.$nextTick(res => {
                    this.getEcharts();

                })
            });
        },
        getData() {
            this.$baseRequest('/member/analysis/memberProfile', this.form, {}, 'post').then(res => {
                this.memberObject = res.data;
                this.anotherEcharts();
            });
        },
        anotherEcharts() {
            for (let index = 0; index < this.memList.length; index++) {
                this.memList[index].myChart = echarts.init(document.getElementById(`echarts${index}`));
            }
            let memberData = [this.memberObject['会员销售占比'].rate, this.memberObject['会员毛利额占比'].rate, this.memberObject['会员来客数占比'].rate, this.memberObject['活跃会员占比'].rate]
            for (let index = 0; index < this.memList.length; index++) {


                this.memList[index].option = {
                    color: [this.memList[index].color, '#EBF2F8'],//修改图表颜色
                    // 环形图中间默认显示文字
                    title: [
                        {
                            // 成交金额文本
                            text: memberData[index],
                            left: "45%",
                            top: "50%",
                            textAlign: "center",
                            textVerticalAlign: "middle",
                            textStyle: {
                                fontSize: 20,
                                color: "#000",
                                lineHeight: 20,
                            },
                        },
                    ],
                    legend: {
                        show: false,
                        orient: "horizontal",
                        left: "center",
                        width: '50%',
                        bottom: "10%",
                        icon: "circle",
                        itemGap: 20, // 设置图例项之间的间距
                    },
                    series: [
                        {
                            hoverAnimation: false,
                            z: 1,
                            name: "环形图",
                            type: "pie",
                            radius: ["85%", "100%"],
                            center: ["50%", "50%"],
                            avoidLabelOverlap: false,
                            labelLine: {
                                show: false,
                            },
                            label: {
                                show: false
                            },
                            data: [
                                { value: Number(memberData[index].split("%")[0]), name: this.memList[index].name },
                                { value: 100 - Number(memberData[index].split("%")[0]), name: '其他' },
                            ],
                        }
                    ],
                };
                this.memList[index].option && this.memList[index].myChart.setOption(this.memList[index].option, true);
            }

        },
        clickDay(index) {
            this.checkIndex = index;
            switch (index) {
                case 0:
                    this.form = {
                        isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                        days: 1, //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getData();
                    break;
                case 1:
                    this.form = {
                        isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                        days: 7, //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getData();
                    break;
                case 2:
                    this.form = {
                        isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                        days: 30, //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getData();
                    break;
                case 3:
                    this.form = {
                        isCustom: 1, //是否为自定义（0 否 最近几天 1 是）
                        days: '', //最近几天天数
                        beginDate: this.value1[0], //自定义开始时间
                        endDate: this.value1[1] //自定义结束时间
                    }
                    this.getData();
                    break;
            }
        },
        changeTime(e) {
            if (e) {
                this.form = {
                    isCustom: 1, //是否为自定义（0 否 最近几天 1 是）
                    days: '', //最近几天天数
                    beginDate: e[0], //自定义开始时间
                    endDate: e[1] //自定义结束时间
                }
                this.getData();
            }
        },
        getToday() {
            var getTime = new Date().getTime(); //获取到当前时间戳
            var time = new Date(getTime); //创建一个日期对象
            var year = time.getFullYear(); // 年
            var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
            var date = time.getDate().toString().padStart(2, '0'); // 日
            var hour = time.getHours().toString().padStart(2, '0'); // 时
            var minute = time.getMinutes().toString().padStart(2, '0'); // 分
            var second = time.getSeconds().toString().padStart(2, '0'); // 秒
            this.value1 = [year + "-" + month + "-" + date, year + "-" + month + "-" + date]
            this.form = {
                isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                days: 1, //最近几天天数
                beginDate: '', //自定义开始时间
                endDate: '' //自定义结束时间
            }
            this.getData();
        },
        freshEchats() {
            this.myChart2.resize();
            this.myChart3.resize();
            this.myChart4.resize();
            this.myChart5.resize();
        },
        getEcharts() {
            this.myChart2 = echarts.init(document.getElementById('echartsHuo'));
            this.myChart3 = echarts.init(document.getElementById('echartsXiao'));
            this.myChart4 = echarts.init(document.getElementById('echartsXin'));
            this.myChart5 = echarts.init(document.getElementById('echartsLao'));
            // memberObject

            this.option2 = {
                legend: {
                    data: ['活跃会员数'],
                    textStyle: {
                        align: 'right',
                    },
                    x: 'right',
                    y: '2%',
                    icon: 'rect',
                    itemHeight: 7, //修改icon图形大小
                },
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '18%',
                    left: '8%',
                    right: '3%',
                    bottom: '10%',
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: true,
                        },
                        splitArea: {
                            // show: true,
                            color: '#f00',
                            lineStyle: {
                                color: '#f00',
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 10,
                        },
                        boundaryGap: false,
                        data: this.activeObject.key,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#e3e3e3',
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            formatter: '{value}',
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '活跃会员数',
                        type: 'line',
                        smooth: false, //是否平滑
                        lineStyle: { color: '#5EAEF8', width: 2 },
                        symbolSize: 10, // symbol大小
                        itemStyle: {
                            normal: {
                                color: '#5EAEF8', // 中心圆点及hover时提示框中数值前面的圆点的颜色
                                borderWidth: 20, // symbol边框
                                borderColor: '#5EAEF8' // symbol边框颜色
                            }
                        },
                        data: this.activeObject.data,
                    },
                ],
            };

            this.option3 = {
                tooltip: {
                    backgroundColor: 'rgba(13, 64, 71, 0.50)',
                    borderColor: 'rgba(143, 225, 252, 0.60)',
                    padding: 8,
                    textStyle: {
                        color: '#fff',
                    }
                },
                legend: {
                    data: ['会员', '会员复购', '新会员'],
                    itemWidth: 14,
                    itemHeight: 10,
                    itemGap: 4,
                    right: 5,
                    textStyle: {
                        fontSize: 14,
                        color: 'black'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.totalConfig['消费人群分布'][0],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#333',
                                fontSize: 12
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        nameTextStyle: {
                            color: "#fff"
                        },
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#333',
                                fontSize: 12
                            }
                        },
                        splitLine: {    //网格线
                            lineStyle: {
                                type: 'solid'    //设置网格线类型 dotted：虚线   solid:实线
                            },
                            show: true //隐藏或显示
                        }
                    },
                ],
                series: [
                    {
                        name: '会员',
                        type: 'bar',
                        color: '#4FD5D7',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 12
                                    }
                                },
                                barBorderRadius: 3,
                            }
                        },
                        data: this.consumeObject.memberCount,
                    },
                    {
                        name: '会员复购',
                        type: 'bar',
                        color: '#96D983',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 12
                                    }
                                },
                                barBorderRadius: 3,
                            },
                        },
                        data: this.consumeObject.repurchaseMemberCount,
                    },
                    {
                        name: '新会员',
                        type: 'bar',
                        color: '#EE7D5D',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 12
                                    }
                                },
                                barBorderRadius: 3,
                            }
                        },
                        data: this.consumeObject.newMemberCount,
                    },
                ]
            };

            this.option4 = {
                tooltip: {
                    backgroundColor: 'rgba(13, 64, 71, 0.50)',
                    borderColor: 'rgba(143, 225, 252, 0.60)',
                    padding: 8,
                    textStyle: {
                        color: '#fff',
                    }
                },
                legend: {
                    data: ['会员转化率', '连续会员转化率'],
                    itemWidth: 14,
                    itemHeight: 10,
                    itemGap: 4,
                    right: 5,
                    textStyle: {
                        fontSize: 14,
                        color: 'black'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.newMemberObject.key,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#333',
                                fontSize: 12
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        nameTextStyle: {
                            color: "#fff"
                        },
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#333',
                                fontSize: 12
                            }
                        },
                        splitLine: {    //网格线
                            lineStyle: {
                                type: 'solid'    //设置网格线类型 dotted：虚线   solid:实线
                            },
                            show: true //隐藏或显示
                        }
                    },
                ],
                series: [
                    {
                        name: '会员转化率',
                        type: 'bar',
                        color: '#4FD5D7',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 12
                                    }
                                },
                                barBorderRadius: 3,
                            }
                        },
                        data: this.newMemberObject.data,
                    },
                    {
                        name: '连续会员转化率',
                        type: 'bar',
                        color: '#96D983',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 12
                                    }
                                },
                                barBorderRadius: 3,
                            },
                        },
                        data: this.newMemberObject.data,
                    },
                ]
            };

            this.option5 = {
                tooltip: {
                    backgroundColor: 'rgba(13, 64, 71, 0.50)',
                    borderColor: 'rgba(143, 225, 252, 0.60)',
                    padding: 8,
                    textStyle: {
                        color: '#fff',
                    }
                },
                legend: {
                    data: ['未复购', '复购一次', '复购多次'],
                    itemWidth: 14,
                    itemHeight: 10,
                    itemGap: 4,
                    right: 5,
                    textStyle: {
                        fontSize: 14,
                        color: 'black'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.oldRepurchaseObject.key,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#333',
                                fontSize: 12
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        nameTextStyle: {
                            color: "#fff"
                        },
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#333',
                                fontSize: 12
                            }
                        },
                        splitLine: {    //网格线
                            lineStyle: {
                                type: 'solid'    //设置网格线类型 dotted：虚线   solid:实线
                            },
                            show: true //隐藏或显示
                        }
                    },
                ],
                series: [
                    {
                        name: '未复购',
                        type: 'bar',
                        color: '#FF7C7D',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 12
                                    }
                                },
                                barBorderRadius: 3,
                            }
                        },
                        data: this.oldRepurchaseObject.notPurchaseCount,
                    },
                    {
                        name: '复购一次',
                        type: 'bar',
                        color: '#FFC056',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 12
                                    }
                                },
                                barBorderRadius: 3,
                            },
                        },
                        data: this.oldRepurchaseObject.purchase1,
                    },
                    {
                        name: '复购多次',
                        type: 'bar',
                        color: '#96D983',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 12
                                    }
                                },
                                barBorderRadius: 3,
                            },
                        },
                        data: this.oldRepurchaseObject.purchaseRepeatedly,
                    },
                ]
            };

            this.option2 && this.myChart2.setOption(this.option2, true);
            this.option3 && this.myChart3.setOption(this.option3, true);
            this.option4 && this.myChart4.setOption(this.option4, true);
            this.option5 && this.myChart5.setOption(this.option5, true);

            window.addEventListener("resize", this.freshEchats);
        },
    }
}
</script>
<style></style>
<style lang="scss" scoped>
.currentChooseYes {
    width: 80px;
    border: 1px solid #70DEDF;
    text-align: center;
    height: 35px;
    line-height: 35px;
    background-color: #E6FFFF;
    color: #70DDDF;
    cursor: pointer;
    font-size: 14px;


}

.currentChoose {
    width: 80px;
    border: 1px solid #E5E4E9;
    text-align: center;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    font-size: 14px;

}

.yunyingBox {
    display: flex;
    align-items: center;
    // flex-wrap: wrap;
    gap: 3px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.yunying {

    flex-shrink: 0;
    width: 120px;
    height: 70px;

    /* 禁止收缩 */
    // width: 100px;

    border: 1px solid #96E7E8;
    padding: 5px;
    border-radius: 5px;
    background-color: #F2FFFF;
}

.title {
    font-size: 22px;
    letter-spacing: 1px;
}

.buttonBox {
    width: 95px;
    padding: 8px 0px;
    text-align: center;
    border: 1px solid #F3F4F5;
    color: #535353;
    font-size: 15px;
    cursor: pointer;

}

.buttonBoxYes {
    cursor: pointer;

    width: 95px;
    color: #70DDDF;
    font-size: 15px;
    background-color: #E6FFFF;

    padding: 8px 0px;
    text-align: center;
    border: 1px solid #96E7E8;
}

.buttonMain :first-child {
    border-radius: 7px 0px 0px 7px;
}

.buttonMain :last-child {
    border-radius: 0px 7px 7px 0px;
}

.buttonMain {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
</style>
